<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="教研组" prop="groupName">
        <el-input
          v-model="queryParams.groupName"
          placeholder="请输入教研组"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="活动主题" prop="subject">
        <el-input
          v-model="queryParams.subject"
          placeholder="请输入活动主题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="活动时间">
        <el-date-picker
          v-model="daterangeActivityTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="主备人" prop="mainName">
        <el-input
          v-model="queryParams.mainName"
          placeholder="请输入主备人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="记录人" prop="recordName">
        <el-input
          v-model="queryParams.recordName"
          placeholder="请输入记录人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="auditState">
        <el-select v-model="queryParams.auditState" placeholder="请选择审核状态" clearable>
          <el-option
            v-for="dict in dict.type.sys_process_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['research:ySchoolResearchActivity:add']"
        >新增
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="ySchoolResearchActivityList" stripe border>
      <el-table-column label="序号" type="index" align="center" width="50"/>
      <el-table-column label="教研组" align="center" prop="groupName" width="200" show-tooltip-when-overflow/>
      <el-table-column label="活动主题" align="center" prop="subject" width="180" show-tooltip-when-overflow/>
      <el-table-column label="活动时间" align="center" prop="activityTime" width="120" show-tooltip-when-overflow/>
      <el-table-column label="活动地点" align="center" prop="activityAddress" width="180" show-tooltip-when-overflow/>
      <el-table-column label="主备人" align="center" prop="mainName" width="180" show-tooltip-when-overflow/>
      <el-table-column label="记录人" align="center" prop="recordName" width="180" show-tooltip-when-overflow/>
      <el-table-column label="参会领导" align="center" prop="leaderName" width="180" show-tooltip-when-overflow/>
      <!--      <el-table-column label="实到人员" align="center" prop="teacherName" width="180" show-tooltip-when-overflow/>-->
      <!--      <el-table-column label="缺勤人员" align="center" prop="absenceName" width="180" show-tooltip-when-overflow/>-->
      <!--      <el-table-column label="请假人员" align="center" prop="leaveName" width="180" show-tooltip-when-overflow/>-->
      <!--      <el-table-column label="迟到人员" align="center" prop="lateName" width="180" show-tooltip-when-overflow/>-->
      <!--      <el-table-column label="应到人数" align="center" prop="dueAmount" width="180" show-tooltip-when-overflow/>-->
      <!--      <el-table-column label="实到人数" align="center" prop="actAmount" width="180" show-tooltip-when-overflow/>-->
      <el-table-column label="审核状态" align="center" prop="auditState" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_process_status" :value="scope.row.auditState"/>
        </template>
      </el-table-column>
      <!--      <el-table-column label="审核意见" align="center" prop="suditMsg"/>-->
      <!--      <el-table-column label="备注" align="center" prop="remark"/>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >查看
          </el-button>

          <el-dropdown size="mini" @command="handleMore($event, scope.row)">
           <span class="el-dropdown-link">
             更多
             <i class="el-icon-arrow-down el-icon--right"></i>
           </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleAudit" icon="el-icon-s-check"
                                v-hasPermi="['research:ySchoolResearchActivity:audit']"
                                v-if="scope.row.auditState==='1'">审核活动
              </el-dropdown-item>
              <el-dropdown-item command="handleUpdate" icon="el-icon-edit"
                                v-hasPermi="['research:ySchoolResearchActivity:edit']"
                                v-if="scope.row.auditState==='3'">修改活动
              </el-dropdown-item>
              <el-dropdown-item command="handleDelete" icon="el-icon-delete"
                                v-hasPermi="['research:ySchoolResearchActivity:remove']"
                                v-if="scope.row.auditState==='9'||scope.row.auditState==='3'" style="color: #F56C6C;">删除活动
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import {listYSchoolResearchActivity, delYSchoolResearchActivity} from "@/api/research/ySchoolResearchActivity"
  import FormFileUpload from '@/components/FileUpload/FormFileUpload.vue'
  import JyResearchGroupSelect from '@/views/research/jyResearchGroup/JyResearchGroupSelect.vue'
  import JyGroupTeacherSelect from '@/views/research/jyTeacher/JyGroupTeacherSelect.vue'
  import JyTeacherSelect from "@/views/research/jyTeacher/JyTeacherSelect.vue"
  import {refreshMixin} from "@/mixins/ListEditMixin.js"

  export default {
    name: "YSchoolResearchActivity",
    dicts: ['sys_process_status'],
    mixins: [refreshMixin],
    components: {FormFileUpload, JyResearchGroupSelect, JyGroupTeacherSelect, JyTeacherSelect},
    data() {
      return {
        loading: true,       // 遮罩层
        showSearch: true,     // 显示搜索条件
        total: 0,      // 总条数
        ySchoolResearchActivityList: [],    //  校本教研活动表格数据
        title: "",        // 弹出层标题
        open: false, // 是否显示弹出层
        daterangeActivityTime: [],       // 备注时间范围
        queryParams: {        // 查询参数
          pageNum: 1,
          pageSize: 10,
          groupId: null,
          groupName: null,
          subject: null,
          activityTime: null,
          activityAddress: null,
          mainId: null,
          mainName: null,
          recordId: null,
          recordName: null,
          leaderName: null,
          teacherName: null,
          absenceName: null,
          leaveName: null,
          lateName: null,
          dueAmount: null,
          actAmount: null,
          auditState: null,
          deptId: null,
        },
        form: {}, // 表单参数
        rules: {  // 表单校验
          groupId: [
            {required: true, message: "教研组Id不能为空"}
          ],
          groupName: [
            {required: true, message: "教研组名称不能为空"}
          ],
          subject: [
            {required: true, message: "活动主题不能为空"}
          ],
          activityTime: [
            {required: true, message: "活动时间不能为空"}
          ],
          activityAddress: [
            {required: true, message: "活动地点不能为空"}
          ],
          mainId: [
            {required: true, message: "主备人不能为空"}
          ],
          mainName: [
            {required: true, message: "主备人不能为空"}
          ],
          recordId: [
            {required: true, message: "记录人不能为空"}
          ],
          recordName: [
            {required: true, message: "记录人不能为空"}
          ],
          teacherName: [
            {required: true, message: "实到人员不能为空"}
          ],
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      /** 查询 校本教研活动列表 */
      getList() {
        this.loading = true
        this.queryParams.params = {}
        if (null != this.daterangeActivityTime && '' != this.daterangeActivityTime) {
          this.queryParams.params["beginActivityTime"] = this.daterangeActivityTime[0] + " 00:00:00"
          this.queryParams.params["endActivityTime"] = this.daterangeActivityTime[1] + " 23:59:59"
        }
        listYSchoolResearchActivity(this.queryParams)
          .then(response => {
            this.ySchoolResearchActivityList = response.rows
            this.total = response.total
            this.loading = false
          })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.daterangeActivityTime = []
        this.resetForm("queryForm")
        this.handleQuery()
      },

      handleMore(type, row) {//点击菜单的时候
        console.log("handleMore", type, row)
        if ("handleUpdate" === type) {
          this.handleUpdate(row)
        } else if ("handleAudit" === type) {
          this.handleAudit(row)
        } else if ("handleDelete" === type) {
          this.handleDelete(row)
        } else {
          this.$modal.msgError("类型错误：" + type)
        }
      },

      /** 新增按钮操作 */
      handleAdd() {
        this.$router.push({
          path: '/research/jySchoolResearchActivityEdit/-1?o=c',
        })
      },
      /** 新增按钮操作 */
      handleView(row) {
        this.$router.push({
          path: '/research/jySchoolResearchActivityEdit/' + row.id + '?o=r',
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.$router.push({
          path: '/research/jySchoolResearchActivityEdit/' + row.id + '?o=u',
        })
      },
      /** 审核按钮操作 */
      handleAudit(row) {
        this.$router.push({
          path: '/research/jySchoolResearchActivityEdit/' + row.id + '?o=a',
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        console.log("handleDelete", row)
        const ids = row.id
        this.$modal.confirm('是否确认删除序号为"' + ids + '"的数据项？')
          .then(() => {
            return delYSchoolResearchActivity(ids)
          }).then(() => {
          this.getList()
          this.$modal.msgSuccess("删除成功")
        }).catch(() => {
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('research/ySchoolResearchActivity/export', {
          ...this.queryParams
        }, `ySchoolResearchActivity_${new Date().getTime()}.xlsx`)
      }
    }
  }
</script>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
